CSS(23) |
您所在的位置：网站首页 › css flot › CSS(23) |
CSS(23)
|
一. float
float 的特性
被设置了浮动的元素会脱离文档流（但也不是完全脱离，下面也会讲）但是float元素并不是完全脱离文档流，即后面的元素不是可以完全升上去被它压在下面！！！
会影响它周围的元素对其进行环绕！！！（下面会讲，行内/块级元素出现在 float 元素下面的情况）
浮动元素的不同情况的渲染
(1) 多个浮动元素
此时会按照顺序排下来，不会出现重叠现象 并且处于后面的float元素的顶端不会高于处于前面的float元素的顶端！！ (2) 非浮动元素在前 ，浮动元素在后float元素的顶端不会高于非float元素的顶端！！！ 会看情况进行展示： - 如果两个元素都为块级元素，那么就**不会**在一行内显示，两个块级元素无法在一行内显示 - 但如果把处于上面的元素变为**行内/行内块**元素，就可以在一行显示（如果放得下的话） 复制代码 (3) 浮动元素在前 ，非浮动元素在后float元素并不是完全脱离文档流，即后面的元素不是可以完全升上去被它压在下面！！！ ，因为浮动最初是设计用来实现文字环绕图片的效果，如果完全脱离文档流，那岂不是文字会盖住图片！！！ 对于位于后面的块级非浮动元素 - 边框和背景会升上去被它压在下面，但内容会跑到`浮动元素外面` 复制代码 我是浮动的元素 我是块级非浮动元素的文本内容 复制代码 .wai{ height: 500px; } .box{ float: left; width: 300px; height: 300px; background-color: red; } .bottom{ width: 200px; height: 200px; background-color: pink; } 复制代码absolute 会完全脱离文档流，即完全不占位置！！！ 常见情况：我们给行内元素设置属性 position：absolute/fixed or float：left 之后，就可以给它设置宽高width/height属性了，即此时的宽高width/height属性可以生效了！！！ 原因就是因为只有块级元素才能脱离文档流， 当我们使它们脱离文档流时，就会自动把它们转变为块级元素！！！！ |
【本文地址】
今日新闻 |
推荐新闻 |